<template>
	<view style="height: 100%; overflow: hidden;padding: 0 32rpx;">
		<view class="form">
			<uni-forms ref="form" :model="formData" :rules="data">
				<uni-forms-item label="收货人" name="shipName">
					<input type="text" maxlength="10" v-model="formData.shipName" placeholder="收货人姓名" />
				</uni-forms-item>
				<uni-forms-item label="联系电话" name="shipPhone">
					<input type="text" v-model="formData.shipPhone" placeholder="请输入联系电话" />
				</uni-forms-item>
				<uni-forms-item label="所在地区" name="areaId">
					<uni-data-picker placeholder="选择省 / 市 / 区" ellipsis :localdata="items" v-model='formData.areaId'
						popup-title="请选择所在地区" @change="onchange" @nodeclick="onnodeclick">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="详细地址" name="detailAddress">
					<textarea v-model="formData.detailAddress" placeholder="详细地址：如道路、门牌号、小区、楼栋号、单元室等" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="activeDess form">
			<view>设为默认收货地址</view>
			<view>
				<switch @change="switchCheckedHandle" :checked="switchChecked" v-model="switchChecked" color="#3F3F3F"
					style="transform:scale(0.7)" />
			</view>
		</view>
		<!-- <u-toast ref="uToast" /> -->
		<view class="btn" @click="saveAddress('form')">
			保存
		</view>
		<!-- <u-button :throttle-time='4000' @click="saveAddress('form')"></u-button> -->
	</view>
</template>

<script>
	import {
		addUserAddress,
		queryAddress,
		queryUserAddressById,
		editUserAddress,
	} from '../../common/address'
	let phoneReg
	// phoneReg = "/^1\d{10}$/"
	phoneReg = '^1\\d{10}$'
	// phoneReg = /^((1[0-9])|(14[5,7,9])|(15[0-9])|(18[0-9])|(17[0,1,3,5,6,7,8]))\\d{8}$/
	// phoneReg = /^1\\d{9}$/
	/*#ifdef MP*/
	phoneReg = '^1\\d{10}$'
	/*#endif*/
	export default {
		data() {
			return {
				data: {
					shipName: {
						rules: [{
							required: true,
							errorMessage: '收货人姓名不能为空'
						}]
					},
					shipPhone: {
						rules: [{
								required: true,
								errorMessage: '收货人手机号不能为空'
							}, {
								pattern: phoneReg,
								errorMessage: '收货人手机号错误'
							},
							// {
							// 	validateFunction: function(rule, value, data, callback) {
							// 		if (value.length !==11) {
							// 			callback('请输入11位手机号')
							// 		}
							// 		return true
							// 	}
							// }
						]
					},
					areaId: {
						rules: [{
							required: true,
							errorMessage: '收货地址不能为空'
						}]
					},
					detailAddress: {
						rules: [{
							required: true,
							errorMessage: '详细地址不能为空'
						}]
					},
				},
				formData: {
					shipName: '',
					shipPhone: '',
					provinceId: '',
					cityId: '',
					areaId: '',
					detailAddress: '',
					isDefault: 1,

				},
				items: [],
				switchChecked: true,
			}
		},
		onLoad(option) {
			//console.log('option', option.id);
			if (option.id) {
				this.queryUserAddressById(option.id)
				uni.setNavigationBarTitle({
					title:"修改收货地址"
				})
			}
			this.queryAddress()
		},
		methods: {
			onchange(e) {
				const value = e.detail.value
				//console.log(e);
				//console.log(value);
				this.formData.provinceId = value[0].value
				this.formData.cityId = value[1].value
				this.formData.areaId = value[2].value
			},
			onnodeclick(node) {},
			queryAddress() {
				queryAddress().then((res) => {
					// //console.log(res);
					this.items = this.matterTree(res.data)
				})
			},
			queryUserAddressById(id) {
				queryUserAddressById(id).then((res) => {
					//console.log(res);
					this.formData = res.data
					Number(this.formData.isDefault) == 1 ? this.switchChecked = true : this.switchChecked = false
				})
			},

			matterTree(data) {
				let keyMap = {
					"id": "value",
					"name": "text"
				};
				for (var i = 0; i < data.length; i++) {
					// 这里面就是你处理数据的地方 
					// data[i].width = '200'
					var obj = data[i];
					for (var key in obj) {
						var newKey = keyMap[key];
						if (newKey) {
							obj[newKey] = obj[key];
							delete obj[key];
						}
					}
					if (data[i].children && data[i].children.length > 0) {
						// children若不为空数组，则继续 递归调用 本方法
						this.matterTree(data[i].children)
					}
				}
				return data
			},
			saveAddress(ref) {
				//console.log(222);
				this.$refs[ref].validate().then(res => {
					if (!this.formData.id) {
						addUserAddress(this.formData).then((res) => {
							//console.log(res);
							uni.showToast({
								icon:'none',
								title: res.msg,
								duration:2000,
								success: () => {
									if (res.code == 200) {
										uni.navigateBack()
									}
								}
							})
						})
					} else {
						editUserAddress(this.formData).then((res) => {
							//console.log(res);
							uni.showToast({
								icon:'none',
								title: res.msg,
								duration:2000,
								success: () => {
									if (res.code == 200) {
										uni.navigateBack()
									}
								}
							})
							// this.$refs.uToast.show({
							// 	title: res.msg,
							// 	message: res.msg,
							// 	icon: false,
							// 	position: 'top',
							// })
							
						})
					}
					// uni.showToast({
					// 	title: `校验通过`
					// })
				}).catch(err => {
					//console.log('err', err);
				})
			},
			switchCheckedHandle(e) {
				// //console.log(e);
				this.switchChecked = e.target.value
				this.switchChecked ? this.formData.isDefault = 1 : this.formData.isDefault = 0
			},
		}
	}
</script>

<style scoped lang="scss">
	page {
		padding-top: 0;
		background-color: #f4f4f4;
	}

	.form {
		// width: 646rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx auto;
		padding: 0 28rpx;
		box-sizing: border-box;
	}

	::v-deep .uni-forms-item {
		// height: 36px;
		margin-bottom: unset;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #f8f8f8;

		.uni-forms-item__label {
			font-size: 30rpx;
			letter-spacing: 2rpx;
			width: 190rpx !important;
		}

		.uni-forms-item__error {
			top: 80% !important;
		}

		&:last-child {
			// align-items: top;
			align-items: unset;

			.uni-forms-item__label {
				position: relative;
				top: -18rpx;
				letter-spacing: 2rpx;
			}
		}

		label {
			// width: ;
			padding: 8rpx 24rpx 0 0;
		}

		input,
		textarea {
			height: 72rpx;
			font-weight: 400;
			font-size: 30rpx;
			letter-spacing: 2rpx;
		}

		textarea {
			height: 90rpx;
			min-height: 72rpx;
			line-height: 36rpx;
			// max-height: 90rpx;
		}

		uni-data-picker,
		.uni-data-picker {
			.uni-data-tree {
				.uni-data-tree-input {
					.input-value {
						padding-left: 0;

						.selected-area {
							font-size: 30rpx;
							letter-spacing: 2rpx;

							.selected-list {
								width: 400rpx !important;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}
		}

		.uni-data-tree {
			.uni-data-tree-input {
				.input-value {
					padding-left: 0;

					.selected-area {
						.uni-scroll-view {
							.uni-scroll-view {
								.uni-scroll-view-content {
									.selected-list {
										width: 400rpx !important;
										overflow: hidden;
										text-overflow: ellipsis;
									}
								}
							}
						}

					}
				}
			}
		}

		.input-value-border {
			border: unset !important;
		}

		textarea {
			width: 100%;
		}
	}

	.activeDess {
		height: 90rpx;
		line-height: 90rpx;
		display: flex;
		justify-content: space-between;

		view {
			color: #333;
			font-weight: bold;
			font-size: 30rpx;
		}
	}

	.btn {
		width: 682rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #333333;
		border-radius: 70rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		position: fixed;
		left: 34rpx;
		bottom: 60rpx;
	}

	::v-deep u-button,
	::v-deep .u-button {
		width: 682rpx !important;
		height: 88rpx !important;
		line-height: 88rpx;
		text-align: center;
		background: #333333;
		border-radius: 70rpx !important;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		position: fixed !important;
		left: 34rpx !important;
		bottom: 60rpx !important;
		opacity: 0;
	}
</style>
